<!-- widget grid -->
<section id="widget-grid" class="">
	<!-- row -->
	<div class="row">
		
		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget" id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-custombutton="false" data-widget-sortable="false">
				<!-- widget options:
					usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
					
					data-widget-colorbutton="false"	
					data-widget-editbutton="false"
					data-widget-togglebutton="false"
					data-widget-deletebutton="false"
					data-widget-fullscreenbutton="false"
					data-widget-custombutton="false"
					data-widget-collapsed="true" 
					data-widget-sortable="false"
					
				-->
				<header>
					<span class="widget-icon"> <i class="fa fa-align-justify"></i> </span>
					<h2>线路报警设置</h2>				
				</header>

				<!-- widget div-->
				<div role="content">
					
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
						<!-- Normally there would be an input text box here to change widget title. 
							Use this area only if plan to let users change widget title --> 
					</div>
					<!-- end widget edit box -->
					
					<!-- widget content -->
					<div class="widget-body no-padding">
						<form class="smart-form" action="">
							<!-- this is what the user will see -->
							<fieldset>
								<div class="alert alert-info">
									<button data-dismiss="alert" class="close">×</button>
									<i class="fa-fw fa fa-info"></i>
									您可以在此页面设置本机构或下属机构班线执行的报警规则。本机构在没有设置规则的前提下，将自动继承上级机构的设置。
								</div>
							   <div class="row">
									<div class="col col-sm-12">
										<div class="row" style="width:600px">
											<label class="label col col-2 text-align-right font-md">选择机构：</label>
											<section class="col col-8">
												<div class="form-group">
													<select style="width:100%" class="select2">
														<optgroup label="华东">
															<option value="AK">上海佳吉</option>
															<option value="HI">杭州佳吉</option>
														</optgroup>
														<optgroup label="广东">
															<option value="CA">广州佳吉</option>
															<option value="NV">深圳佳吉</option>
															<option value="OR">东莞佳吉</option>
															<option value="WA">湛江佳吉</option>
														</optgroup>
														<optgroup label="北京地区">
															<option value="AZ">北京佳吉</option>
															<option value="CO">通州佳吉</option>
															<option value="ID">密云佳吉</option>
															<option value="MT">上地佳吉</option>
															<option value="NE">海淀佳吉</option>
															<option value="NM">石景山佳吉</option>
															<option value="ND">东城佳吉</option>
															<option value="UT">西城佳吉</option>
															<option value="WY">丰台佳吉</option>
														</optgroup>
													</select>
												</div>
											</section>
											<div class="col col-2">
												<button class="btn btn-sm btn-primary " type="submit"> 编辑 </button>
											</div>
										</div>
										
									</div>
									
								</div>
								<hr /><br />

								<h6>设置参数：</h6>
								<div class="row">	
									<section class="col col-xs-12 col-md-12 padding-top-10">
										<div class="col-xs-12 col-md-3" id="warningList">
											
												<ol class="dd-list">
													<li><div name="csbj" id="csbj_tab" class="dd-handle no-margin"><i class="fa fa-fw fa-ellipsis-vertical"></i>晚发预警</div>
														<span class="onoffswitch"><input checked="checked" type="checkbox" id="myonoffswitch1" class="onoffswitch-checkbox" name="onoffswitch1">
															<label for="myonoffswitch1" class="onoffswitch-label"> 
															<div data-swchoff-text="禁用" data-swchon-text="启用" class="onoffswitch-inner"></div> 
															<div class="onoffswitch-switch"></div> </label> 
														</span>
													</li>
													<li><div name="pljsbj"class="dd-handle"><i class="fa fa-fw fa-ellipsis-vertical"></i>晚发报警</div>
														<span class="onoffswitch"><input checked="checked" type="checkbox" id="myonoffswitch2" class="onoffswitch-checkbox" name="onoffswitch2">
															<label for="myonoffswitch2" class="onoffswitch-label"> 
															<div data-swchoff-text="禁用" data-swchon-text="启用" class="onoffswitch-inner"></div> 
															<div class="onoffswitch-switch"></div> </label> 
														</span>
													</li>
													<li><div name="dssx"class="dd-handle"><i class="fa fa-fw fa-ellipsis-vertical"></i>晚到预警</div>
														<span class="onoffswitch"><input type="checkbox" id="myonoffswitch4" class="onoffswitch-checkbox" name="onoffswitch4">
															<label for="myonoffswitch4" class="onoffswitch-label"> 
															<div data-swchoff-text="禁用" data-swchon-text="启用" class="onoffswitch-inner"></div> 
															<div class="onoffswitch-switch"></div> </label> 
														</span>
													</li>
													<li>
														<div name="stayOverTime" class="dd-handle"><i class="fa fa-fw fa-ellipsis-vertical"></i>晚到报警</div>
														<span class="onoffswitch"><input type="checkbox" id="myonoffswitch5" class="onoffswitch-checkbox" name="onoffswitch5">
															<label for="myonoffswitch5" class="onoffswitch-label"> 
															<div data-swchoff-text="禁用" data-swchon-text="启用" class="onoffswitch-inner"></div> 
															<div class="onoffswitch-switch"></div> </label> 
														</span>
													</li>
													<li><div name="doorOpen" class="dd-handle"><i class="fa fa-fw fa-ellipsis-vertical"></i>线路偏离报警</div>
														<span class="onoffswitch"><input type="checkbox" id="myonoffswitch6" class="onoffswitch-checkbox" name="onoffswitch6">
															<label for="myonoffswitch6" class="onoffswitch-label"> 
															<div data-swchoff-text="禁用" data-swchon-text="启用" class="onoffswitch-inner"></div> 
															<div class="onoffswitch-switch"></div> </label> 
														</span>
													</li>
												</ol>
												
											</div>
											<div class="col-xs-12 col-md-9">
											<div style="padding-left:15px" >
												<div id="csbj" class="well well-light padding-10 show_tab">
													<table class="table">
														<tbody >
															<tr>
																<td width="50%">
																	<label class="label">晚发预警时间：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="30">
																		<b class="tooltip tooltip-bottom-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		按设定时间监控车辆必须在出发地范围内，否则系统将进行晚发预警，车辆绑定班线或运单后，晚发预警功能可用。 
																		</b>
																	</label>
																	<div class="note">
																		单位：分钟
																	</div>
																</td>
																<td>
																	
																</td>
															</tr>
														</tbody>
													</table>
													<table class="table table-striped">
														<tbody >
															<tr>
																<td width="160px">
																	<div>
																		<label><strong>晚发预警语音播报：</strong></label>
																		<label class="margin-top-10">
																			<span class="onoffswitch"><input type="checkbox" id="myonoffswitch11" class="onoffswitch-checkbox" name="onoffswitch11">
																				<label for="myonoffswitch11" class="onoffswitch-label"> 
																				<div data-swchoff-text="关闭" data-swchon-text="开启" class="onoffswitch-inner"></div> 
																				<div class="onoffswitch-switch"></div> </label> 
																			</span>
																		</label>
																	</div>																	
																</td>
																<td>
																	<label class="label">语音播报内容：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="您还未到达指定场地，有延误发车的可能">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		视网络情况可能会有30秒-2分钟的朗读延迟
																		</b>
																	</label>
																	<div class="note">
																		最长50个汉字
																	</div>
																</td>
																<td width="80px">
																	<label class="label">播报次数：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="2">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		最多5次
																		</b>
																	</label>
																	<div class="note">
																		单位：次
																	</div>
																</td>
															</tr>
															
														</tbody>
													</table>
													<div class="alert alert-warning margin-top-10">
														<i class="fa-fw fa fa-warning"></i>
														<strong>语音报警</strong> 只对特定设备有效.
													</div>
												</div>
												<div id="pljsbj" class="well well-light padding-10 show_tab">
													
													<table class="table">
														<tbody >
															<tr>
																<td width="50%">
																	<label class="label">晚发报警时间：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="30">
																		<b class="tooltip tooltip-bottom-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		当车辆未按规定时间从出发地范围驶出时即为晚发，晚发时间超过设置时间系统自动报警。 
																		</b>
																	</label>
																	<div class="note">
																		单位：分钟
																	</div>
																</td>
																<td>
																	
																</td>
															</tr>
														</tbody>
													</table>
													<table class="table table-striped">
														<tbody >
															<tr>
																<td width="160px">
																	<div>
																		<label><strong>晚发报警语音播报：</strong></label>
																		<label class="margin-top-10">
																			<span class="onoffswitch"><input type="checkbox" id="myonoffswitch11" class="onoffswitch-checkbox" name="onoffswitch11">
																				<label for="myonoffswitch11" class="onoffswitch-label"> 
																				<div data-swchoff-text="关闭" data-swchon-text="开启" class="onoffswitch-inner"></div> 
																				<div class="onoffswitch-switch"></div> </label> 
																			</span>
																		</label>
																	</div>																	
																</td>
																<td>
																	<label class="label">语音播报内容：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="您已经延误发车">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		视网络情况可能会有30秒-2分钟的朗读延迟
																		</b>
																	</label>
																	<div class="note">
																		最长50个汉字
																	</div>
																</td>
																<td width="80px">
																	<label class="label">播报次数：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="2">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		最多5次
																		</b>
																	</label>
																	<div class="note">
																		单位：次
																	</div>
																</td>
															</tr>
															
														</tbody>
													</table>
													<div class="alert alert-warning margin-top-10">
														<i class="fa-fw fa fa-warning"></i>
														<strong>语音报警</strong> 只对特定设备有效.
													</div>
												</div>
												
												<div id="dssx" class="well well-light padding-10 show_tab">
													
													<table class="table">
														<tbody >
															<tr>
																<td width="50%">
																	<label class="label">晚到预警时间：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="30">
																		<b class="tooltip tooltip-bottom-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		若设置报警时间为30分钟，则表示在计划到达时间前30分钟对比一下预计到达时间，此时预计到达时间大于计划到达时间，则产生晚到预警，并且最多只会产生一条。 
																		</b>
																	</label>
																	<div class="note">
																		单位：分钟
																	</div>
																</td>
																<td>
																	
																</td>
															</tr>
														</tbody>
													</table>
													<table class="table table-striped">
														<tbody >
															<tr>
																<td width="160px">
																	<div>
																		<label><strong>晚到预警语音播报：</strong></label>
																		<label class="margin-top-10">
																			<span class="onoffswitch"><input type="checkbox" id="myonoffswitch11" class="onoffswitch-checkbox" name="onoffswitch11">
																				<label for="myonoffswitch11" class="onoffswitch-label"> 
																				<div data-swchoff-text="关闭" data-swchon-text="开启" class="onoffswitch-inner"></div> 
																				<div class="onoffswitch-switch"></div> </label> 
																			</span>
																		</label>
																	</div>																	
																</td>
																<td>
																	<label class="label">语音播报内容：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="您有延误到达的可能">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		视网络情况可能会有30秒-2分钟的朗读延迟
																		</b>
																	</label>
																	<div class="note">
																		最长50个汉字
																	</div>
																</td>
																<td width="80px">
																	<label class="label">播报次数：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="2">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		最多5次
																		</b>
																	</label>
																	<div class="note">
																		单位：次
																	</div>
																</td>
															</tr>
															
														</tbody>
													</table>
													<div class="alert alert-warning margin-top-10">
														<i class="fa-fw fa fa-warning"></i>
														<strong>语音报警</strong> 只对特定设备有效.
													</div>
												</div>
												<div id="stayOverTime" class="well well-light padding-10 show_tab">
													
													<table class="table">
														<tbody >
															<tr>
																<td width="50%">
																	<label class="label">晚到报警时间：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="30">
																		<b class="tooltip tooltip-bottom-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		当车辆到达目的地范围驶晚于设定时间时，系统产生晚到报警。 
																		</b>
																	</label>
																	<div class="note">
																		单位：分钟
																	</div>
																</td>
																<td>
																	
																</td>
															</tr>
														</tbody>
													</table>
													<table class="table table-striped">
														<tbody >
															<tr>
																<td width="160px">
																	<div>
																		<label><strong>晚到报警语音播报：</strong></label>
																		<label class="margin-top-10">
																			<span class="onoffswitch"><input type="checkbox" id="myonoffswitch11" class="onoffswitch-checkbox" name="onoffswitch11">
																				<label for="myonoffswitch11" class="onoffswitch-label"> 
																				<div data-swchoff-text="关闭" data-swchon-text="开启" class="onoffswitch-inner"></div> 
																				<div class="onoffswitch-switch"></div> </label> 
																			</span>
																		</label>
																	</div>																	
																</td>
																<td>
																	<label class="label">语音播报内容：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="您已经延误到达">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		视网络情况可能会有30秒-2分钟的朗读延迟
																		</b>
																	</label>
																	<div class="note">
																		最长50个汉字
																	</div>
																</td>
																<td width="80px">
																	<label class="label">播报次数：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="2">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		最多5次
																		</b>
																	</label>
																	<div class="note">
																		单位：次
																	</div>
																</td>
															</tr>
															
														</tbody>
													</table>
													<div class="alert alert-warning margin-top-10">
														<i class="fa-fw fa fa-warning"></i>
														<strong>语音报警</strong> 只对特定设备有效.
													</div>
												</div>
												<div id="doorOpen" class="well well-light padding-10 show_tab">
													
													<table class="table">
														<tbody >
															<tr>
																<td width="50%">
																	<label class="label">线路偏移持续时间：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="30">
																		<b class="tooltip tooltip-bottom-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		当车辆偏离线路行驶超过规定时间后，系统将进行线路偏移报警。 
																		</b>
																	</label>
																	<div class="note">
																		单位：分钟
																	</div>
																</td>
																<td>
																	
																</td>
															</tr>
														</tbody>
													</table>
													<table class="table table-striped">
														<tbody >
															<tr>
																<td width="160px">
																	<div>
																		<label><strong>线路偏移语音播报：</strong></label>
																		<label class="margin-top-10">
																			<span class="onoffswitch"><input type="checkbox" id="myonoffswitch11" class="onoffswitch-checkbox" name="onoffswitch11">
																				<label for="myonoffswitch11" class="onoffswitch-label"> 
																				<div data-swchoff-text="关闭" data-swchon-text="开启" class="onoffswitch-inner"></div> 
																				<div class="onoffswitch-switch"></div> </label> 
																			</span>
																		</label>
																	</div>																	
																</td>
																<td>
																	<label class="label">语音播报内容：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="您已经偏离标准线路1公里,请按照标准线路行驶">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		视网络情况可能会有30秒-2分钟的朗读延迟
																		</b>
																	</label>
																	<div class="note">
																		最长50个汉字
																	</div>
																</td>
																<td width="80px">
																	<label class="label">播报次数：</label>
																	<label class="input">
																		<i class="icon-append fa fa-question-circle"></i>
																		<input type="text" maxlength="3" class="input-sm" value="2">
																		<b class="tooltip tooltip-top-right">
																		<i class="fa fa-warning txt-color-teal"></i>
																		最多5次
																		</b>
																	</label>
																	<div class="note">
																		单位：次
																	</div>
																</td>
															</tr>
															
														</tbody>
													</table>
													<div class="alert alert-warning margin-top-10">
														<i class="fa-fw fa fa-warning"></i>
														<strong>语音报警</strong> 只对特定设备有效.
													</div>
												</div>
												
												<div id="nochecked" class="well well-light padding-10 show_tab">
													<h6 class="txt-color-red">报警未开启</h6>
												</div>
											</div>
											
										</div>
									</section>
								</div>
							</fieldset>
							<footer>
								<button class="btn btn-default" type="submit"> 取消 </button>
								<button class="btn btn-primary" type="submit"> 保存设置	</button>
							</footer>     
						</form>

					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->	
		  </div>
			<!-- end widget -->

		</article>
		<!-- WIDGET END -->
		
	</div>

	<!-- end row -->

	<!-- row -->

	<div class="row">

		<!-- a blank row to get started -->
			
	</div>

	<!-- end row -->
	</section>
<!-- end widget grid -->

<script type="text/javascript">
	
	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 */
	$(".onoffswitch-checkbox").click(function(){
		if($(this).attr("checked")=="checked"){
			$(this).removeAttr("checked");
			}							
		else{
			$(this).attr("checked","checked");
			}
		});
	function show_table(){
			$("#warningList li").css("position","relative"); 
			$("#warningList li .onoffswitch").css({
				"position":"absolute",
				"top":"8px",
				"right":"5px",				
				}); 			
			$(".show_tab").hide();	
			$("#csbj").fadeIn();
			
			$("#warningList .dd-handle").click(function(){
				$(this).parent("li").siblings().children(".dd-handle").css({"background":"#FBFBFB","border-color":"#CFCFCF"});
				$(this).css({"background":"#FDDFB3","border-color":"#FAA937"});
				var bname = $(this).attr("name");
				$(".fa-check-square").attr("class","fa fa-fw fa-ellipsis-vertical");
				
				$(".show_tab").hide();
				if ($(this).siblings("span").children("input").attr("checked") == "checked") {
					$("#"+bname).show();
					$(this).children("i").attr("class","fa fa-fw fa-check-square");

				}
				else{
					$("#nochecked").show();
				}
				console.log($(this).siblings("span").children("input").attr("checked"));
				});
		};
		
	show_table();	

	/*
	 * TIMEPICKER
	 */

	 //Load time picker script

	loadScript("js/plugin/bootstrap-timepicker/bootstrap-timepicker.min.js", runTimePicker);

	function runTimePicker() {
	    $('#timePicker1,#timePicker3').timepicker({
			minuteStep: 1,
			//template: 'modal',
			appendWidgetTo: 'body',
			showSeconds: false,
			showMeridian: false,
			defaultTime: '22:00'
		});
		$('#timePicker2,#timePicker4').timepicker({
			minuteStep: 1,
			//template: 'modal',
			appendWidge5To: 'body',
			showSeconds: false,
			showMeridian: false,
			defaultTime: '6:00'
		});
		 $('#timePicker5').timepicker({
			minuteStep: 1,
			//template: 'modal',
			appendWidgetTo: 'body',
			showSeconds: false,
			showMeridian: false,
			defaultTime: '00:00'
		});
		$('#timePicker6').timepicker({
			minuteStep: 1,
			//template: 'modal',
			appendWidge5To: 'body',
			showSeconds: false,
			showMeridian: false,
			defaultTime: '23:59'
		});
	}	
</script>
